/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div>
        <textarea
            ref="mycode"
            v-model="value"
            class="codesql"
        >
        </textarea>
    </div>
</template>

<script>
import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";
import {compare} from './util'
let CodeMirror = require("codemirror/lib/codemirror");
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/mode/sql/sql");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/sql-hint");
export default {
    data() {
        return {
            editor: null
        }
    },
    props: {
        value: {
            type: String,
            default: ''
        },
        sqlStyle: {
            type: String,
            default: 'default'
        },
        readOnly: {
            type: [Boolean, String]
        },
        tables: {
            type: Object,
            default:()=>({})
        },
        placeholder: {
            type: String,
            default: ''
        }
    },
    watch: {
        newVal () {
            if (this.editor) {
                this.$emit('change-textarea', this.editor.getValue())
            }
        },
        tables() {
            this.editor.setOption('hintOptions', { // 自定义提示选项
                completeSingle: false, // 当匹配只有一项的时候是否自动补全
                tables: this.tables
            });
        },
        readOnly() {
            this.editor.setOption(`readOnly`,
                this.readOnly
            )
        }
    },
    computed: {
        newVal () {
            if (this.editor) {
                return this.editor.getValue()
            }
            return ''
        }
    },

    mounted(){
        let mime = 'text/x-mariadb'
        // let theme = 'ambiance'//设置主题，不设置的会使用默认主题
        this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
            value: this.value,
            mode: mime,// 选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            matchBrackets: true,
            cursorHeight: 1,
            lineWrapping: true,
            readOnly: this.readOnly,
            // theme: theme,
            // autofocus: true,
            extraKeys: {'Ctrl': 'autocomplete'},// 自定义快捷键
            hintOptions: {// 自定义提示选项
                // 当匹配只有一项的时候是否自动补全
                completeSingle: false,
                tables: this.tables,
            }
        })
        // 代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
        this.editor.on('inputRead', () => {
            this.editor.showHint()
        })
        this.initValue(this.editor)
        this.editor.on('focus', () => {
            // // 刚开始聚焦解决聚焦问题
            // this.editor.setCursor({
            //   line: 1,
            //   ch: 5
            // });
            const code = this.editor.getValue();
            // 聚焦的时候清除placeholder
            if (compare(code, this.placeholder)) {
                this.editor.setValue('');
            } else {
                this.editor.setValue(code);
            }
        });
        this.editor.on('blur', () => {
            const code = this.editor.getValue();
            if (code === '') {
                // 如果是空，则显示占位符
                this.$emit('change-textarea', '');
                this.editor.setValue(this.placeholder);
            } else if (compare(code, this.placeholder)) {
                // 失去焦点的时候判断是否是占位符，如果是占位符则清除placeholder
                this.editor.setValue('');
            } else {
                this.editor.setValue(code);
                // 失去焦点向上级发送事件并把新值传递给父组件处理
                this.$emit('change-textarea', code);
            }
        });
    },
    methods: {
        initValue(codeMirror) {
            // 判断是否有值，如果有值则设置值，如果没有则将占位符填充
            if (this.value) {
                codeMirror.setValue(this.codeStr);
            } else {
                codeMirror.setValue(this.placeholder);
            }
        },
        setVal () {
            if (this.editor) {
                if (this.value === '') {
                    this.editor.setValue('')
                } else {
                    this.editor.setValue(this.value)
                }

            }
        }
    }
}
</script>
<style lang="less">
.CodeMirror {
    height: 100%;
    color: black;
    direction: ltr;
    line-height: 22px;
}
.CodeMirror-hints{
       z-index: 9999 !important;
}
</style>
